<template>
  <div class="common-layout">

    <el-container>
      <video controls :src="src" ref="myRef"/>
      <el-container>
        <el-aside>
          <el-card v-for="(value, index) in target" :key="index">
            <el-tag>{{ value }}</el-tag>
            <el-button @click="startTime(value)">开始</el-button>
            <el-button @click="endTime(value)">结束</el-button>
          </el-card>
          <el-button @click="uploadResult(data)">提交</el-button>

        </el-aside>

      </el-container>

    </el-container>
    <el-aside>
      <el-card v-for="(value, index) in data" :key="index">
        <el-tag>{{ index }}: {{ value.tag }}, {{ value.start }}, {{ value.end }}</el-tag>
        <el-button @click="deleteTag(index)">删除</el-button>
      </el-card>
    </el-aside>

  </div>


</template>

<script setup lang="ts">
import {defineProps, ref, toRefs} from "vue";
import submitRoughResult from "@/api/task/submit/submitRoughResult";

const props = defineProps({
  id: {
    type: Number,
    default: () => 0
  },
  target: {
    type: Array,
    default: () => []
  }
})

const {id, target} = toRefs(props);
const data = ref<[]>([]);

const src = '/api/rough-task/video/' + id?.value;
const myRef = ref(null);


const startTime = (value) => {
  if (data.value.length == 0 || null != data.value[data.value.length - 1].end) {
    data.value.push({
      tag: value,
      start: myRef.value.currentTime,
    })
  } else {
    alert("请先完成上一个标签")
  }

}

const endTime = (value) => {
  if (data.value.length != 0 && data.value[data.value.length - 1].tag == value) {
    data.value[data.value.length - 1].end = myRef.value.currentTime;
  } else {
    alert("请确认已经开始的标签")
  }
}

const deleteTag = (index: number) => {
  data.value.splice(index, 1);
}

const uploadResult  = async (data)=>{
  await submitRoughResult(data,id?.value);

}


</script>

<style scoped>
video {
  width: 70%;
  height: auto;
}


</style>